<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Document</title>
	<meta name="keyword" content="">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="../ued/style/reset.css">
</head>
<style>
#main{width:960px;height:400px;margin:50px auto; }
#main ul,#main li{float:left;}
#main_slideBox{position: relative;overflow: hidden;width: inherit;height:inherit;}
#main_slideBoxInner{width:10000%;}
#main_slideBox li { width: 960px;height:400px;}
#main_slideBox img {width:inherit;height:inherit;}
.main_switcher_box li {width: 20px;height: 20px; line-height: 20px;margin: 5px; text-align: center; border:1px solid #ddd;cursor: pointer; }
.crt{ background: #c00;color: #fff; }
</style>
<body>	
<div id="main">
	<ul>
		<li><img src="../1.jpg" alt="图片"></li>
		<li><img src="../1.jpg" alt="图片"></li>
		<li><img src="../1.jpg" alt="图片"></li>
	</ul>
</div>	
</body>
<script type="text/javascript" src="../ued/style/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#main').kslide();
})

</script>
<script>

(function($){
	$.fn.kslide=function(option){
		var _default={
			effect:"scrollLeft",
			speed:300,
			space:2000,
			auto:true,
			trigger:'click',
			btnEnable:true
		}

		$.extend(true,_default,option);
		var me = $(this),
			meId = $(this).attr('id'),
			liCount=me.children().children().length,
			boxWidth=me.width(),
			boxHeight=me.height(),
			slideBox = $("<div id='" + meId + "_slideBox'>"),
			slideBoxInner = $("<div id='" + meId + "_slideBoxInner'>");

		me.children().appendTo(slideBoxInner);
		slideBox.append(slideBoxInner);
		me.append(slideBox);


		if (_default.btnEnable) {
			var ulBtn = $("<ul class='"+meId+"_switcher_box'>");
			for (var i = 0; i < liCount; i++) {
				var liBtn = $("<li id='" + meId + "_btn" + i + "' >" + (i + 1) + "</li>");
				ulBtn.append(liBtn);
			};
			me.append(ulBtn);
		}


		var no = 0;
		var content_box = $('#'+meId+'_slideBox'),content_tag = content_box.find('li');
		var switcher_box = $('.'+meId+'_switcher_box'),switcher_tag = switcher_box.find('li');
		var slideInterval;

		if(_default.effect=='scrollLeft'){
			content_tag.css({
				float:'left'

			});
		}else if(_default.effect=='scrollTop'){
			content_tag.css({
				float:'none'
			})
		}else if(_default.effect=='fade' && _default.effect=='none'){
			content_tag.css({
				position:'absolute',
				display:'none'
			})
		}

		if(_default.auto) slideInterval=setInterval(slideShow,_default.space);
		switcher_tag.bind(_default.trigger,function() {
			clearInterval(slideInterval)
			no = $(this).index();
			slideShow();
			if(_default.auto) slideInterval=setInterval(slideShow,_default.space);
		});

		function slideShow(){
			if(no>=content_tag.length) no=0;
			switcher_tag.eq(no).addClass('crt').siblings().removeClass('crt');
			switch(_default.effect){
				case 'scrollLeft':
					content_box.stop().animate({"scrollLeft":no*(content_box.width())},_default.speed);
					break;
				case 'scrollTop':
					content_box.stop().animate({"scrollTop":no*(content_box.height())},_default.speed);
					break;
				case 'fade':
					content_tag.eq(no).stop().fadeIn(_default.speed).siblings().stop().fadeOut(_default.speed);
					break;
				case 'none':
					content_tag.eq(no).show().siblings().hide();
					break;
			}
			no++;
		}slideShow();
	}	
})(jQuery);




</script>
</html>